<template>
  <div>
    <van-nav-bar title="全部商品" :left-arrow="false" />

    <van-search v-model="value" placeholder="请输入礼包编号" @focus="onFocus" />

    <div style="display: flex" id="category">
      <van-sidebar
        v-model="active"
        @change="onChange"
        v-if="categories.length > 0"
      >
        <van-sidebar-item
          v-for="item in categories"
          :title="item.name"
          :key="item.id"
        />
      </van-sidebar>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-card
          v-for="item in goodsDatas"
          :num="item.stock_nums"
          :price="item.price"
          :desc="item.desc"
          :title="item.name"
          :thumb="item.title_image || '-'"
          :key="item.id"
          @click="goodsDetail(item.id)"
        />
      </van-list>
    </div>
  </div>
</template>

<script>
import { getCategories, getGoodsList } from "@/api/shopping";
export default {
  name: "Goods",
  components: {},
  props: {},
  data() {
    return {
      active: 0,
      categories: [],
      goodsDatas: [],
      loading: false,
      finished: false,
      goodsNums: 0,
      listQuery: {
        page: 1,
        page_size: 20,
        key_word: null,
        category: null,
      },
      value: "",
    };
  },
  computed: {},
  created() {
    this.getCategoryList();
  },
  mounted() {},
  methods: {
    onFocus() {
      // console.log("focus");
      this.$router.push("/gift/search");
    },
    onLoad() {
      setTimeout(() => {
        if (this.categories.length > 0) {
          this.listQuery.category = this.categories[0].id;
        }
        this.getGoods();
      }, 300);
    },
    getCategoryList() {
      getCategories()
        .then((res) => {
          this.categories = res.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getGoods() {
      getGoodsList(this.listQuery)
        .then((res) => {
          if (res.data.results.length === 0) {
            this.goodsDatas = []; // 清空数组
            this.finished = true; // 停止加载
          }
          this.goodsNums = res.data.count;
          this.listQuery.page = res.data.page;
          this.goodsDatas.push(...res.data.results);
          this.loading = false;

          if (this.goodsDatas.length >= res.data.count) {
            this.finished = true; // 结束加载状态
          }
        })
        .catch((error) => {
          this.$notify({ type: "danger", message: "读取商品失败" + error });
          if (error.response) {
            // this.$notify({ type: "danger", message: "读取商品失败" + error });
          }
        });
    },
    onChange(index) {
      console.log(index, this.categories[index]);
      this.listQuery.category = this.categories[index].id;
      this.listQuery.page = 1;
      this.goodsDatas = [];
      this.getGoods();
    },
    goodsDetail(goods_id) {
      console.log(goods_id);
      this.$router.push(`/goods/${goods_id}`);
    },
  },
};
</script>

<style  scoped>
.van-search .van-cell{
  line-height: 45px;
  font-size: 18px;
}
</style>